Day 4 - 淺談 CSS

以 Day 3 - UI 程式碼為例

1. 建 React 時就有的 App.css

   <-- 在 App.js 中 -->
   import './App.css';
   <div className="App">
   

   <-- 在 App.css 中 --> 
   .App {
     text-align: center;
   }
   

2. 對於 Ant Design Button 做 style 調整

   <-- 離左邊Button 6 px -->
   <Button type="primary">+1 Player</Button>
   <Button style={{marginLeft:6}}>+2 Player</Button>
   

其他 style 概述

• 自定義 css，將客製style寫入其中，藉由className或其他套入。
  • 將 App.css (原附的) 與 Custom.css (自訂的)分出來
• 對於Ant Design原附的Style做調整。
  • Sample

關於CSS的問題及解法分享

• 問題描述:
  • 調整瀏覽器縮放趴數時，Table 會往左右跑動
• 解法: 裝進容器，並設定其占版面的趴數
  • 放進 <div style={{width:"100%"}}>